import React, { useState } from 'react'
import { Form, Segment, Button, Select, Table, Icon, InputNumber, Input, Slider, InputAdornment } from 'tea-component'
import AddImg from '@/assets/add.svg'

const { sortable, scrollable, radioable, pageable } = Table.addons
const marks = [{ value: 0 }, { value: 20 }, { value: 50 }, { value: 100 }]
const selectStyles = { width: '200px', marginRight: '12px' }

export default function FormLayoutExample() {
  /** @type {any} */
  const [layout, setLayout] = useState('default')
  const [hideLabel, setHideLabel] = useState(false)
  const [value, setValue] = useState(0)
  const [value1, setValue1] = useState(20)
  // 当前排序列
  const [sorts, setSorts] = useState([])
  // 当前选中行
  const [selected, setSelected] = useState(null)

  return (
    <div className="example-stage">
      <Form hideLabel={hideLabel}>
        <Form.Item label="Billing Mode">
          <Segment
            defaultValue="default"
            options={[
              { value: 'default', text: 'Pay as you go' },
              { value: 'fixed', text: 'Spot Instances' }
            ]}
          />
        </Form.Item>
        <Form.Item label="Region">
          <Segment
            defaultValue="default"
            options={[
              { value: 'default', text: 'Singapore' },
              { value: 'fixed', text: 'Hong kong,China' },
              { value: 'Malaysia', text: 'Malaysia' },
              { value: 'Indonesia', text: 'Indonesia' }
            ]}
          />
        </Form.Item>
        <Form.Item label="Availability Zone">
          <Segment
            defaultValue="default"
            options={[
              { value: 'default', text: 'Random AZ' },
              { value: 'fixed', text: 'Singapore Zone 1' },
              { value: 'Malaysia', text: 'Singapore Zone 2' },
              { value: 'Indonesia', text: 'Singapore Zone 3' }
            ]}
          />
        </Form.Item>
        <Form.Item label="Network">
          <Select
            appearance="button"
            style={selectStyles}
            options={[{ value: 'durian', text: 'vpc-96mysad|10.0.0.0' }]}
            defaultValue={'durian'}
            placeholder="please select"
          />
          <Select
            appearance="button"
            style={selectStyles}
            options={[{ value: 'durian', text: 'Subnet-215dzdw|10.0.0.0/24' }]}
            defaultValue={'durian'}
            placeholder="please select"
          />
        </Form.Item>
        <Form.Item label="Instance">
          <Select
            appearance="button"
            style={selectStyles}
            options={[
              { value: 'All CPU', text: 'All CPU' },
              ...Array.from({ length: 8 }).map((_, i) => ({ value: `${i}`, text: Math.max(i * 2, 1) + '-core' }))
            ]}
            defaultValue={'All CPU'}
            placeholder="please select"
          />
          <Select
            appearance="button"
            style={selectStyles}
            listWidth={200}
            options={[
              { value: 'Total Mem', text: 'Total Mem' },
              ...Array.from({ length: 8 }).map((_, i) => ({
                value: `${i}`,
                text: Math.max((i >= 3 ? i - 1 : i) * (i >= 3 ? 4 : 2), 1) + 'G'
              }))
            ]}
            defaultValue={'Total Mem'}
            placeholder="please select"
          />
          <div style={{ height: '10px' }}></div>
          <Segment
            defaultValue="default"
            options={[
              { value: 'default', text: 'All Models' },
              { value: 'fixed', text: 'Standard' },
              { value: 'Malaysia', text: 'High IO' },
              { value: 'Indonesia', text: 'MEM-optimized' },
              { value: 'Indonesia2', text: 'Compute' },
              { value: 'GPU-based', text: 'GPU-based' },
              { value: 'Big Data', text: 'Big Data' }
            ]}
          />
          <div style={{ height: '10px' }}></div>
          <Segment
            defaultValue="default"
            options={[
              { value: 'default', text: 'All Types' },
              { value: 'fixed', text: 'Standard S6' },
              { value: 'Malaysia', text: 'Standard SA2' },
              { value: 'Indonesia', text: 'Standard S5' }
            ]}
          />
          <div style={{ height: '10px' }}></div>
          <Table
            bordered
            records={Array.from({ length: 5 }).map((_, i) => ({
              Model: 'Standard S' + i,
              Specifications: 'SA2.SMALL2',
              vCPU: i + '-core',
              MEM: Math.max(i * 2, 1) + 'CB',
              CPU: 'AMD EPYC™ Rome(2.6GHz/3.3GHz)',
              'Private network bandwidth': '1.5Gbps',
              'Packets In/Out': '250k PPS',
              'Supported Availability Zones': '24 availability zone(s)',
              Notes: 'None',
              Fee: `${Math.max(i * 2, 1) / 100}USD/hr`
            }))}
            recordKey="Model"
            rowDisabled={record => record.name === '张三'}
            columns={[
              { key: 'Model', header: 'Model' },
              { key: 'Specifications', header: 'Specifications' },
              {
                key: 'vCPU',
                header: 'vCPU'
              },
              {
                key: 'MEM',
                header: 'MEM'
              },
              {
                key: 'CPU',
                header: 'CPU'
              },
              {
                key: 'Private network bandwidth',
                header: 'Private network bandwidth'
              },
              {
                key: 'Packets In/Out',
                header: 'Packets In/Out'
              },
              {
                key: 'Supported Availability Zones',
                header: 'Supported Availability Zones'
              },
              {
                key: 'Notes',
                header: 'Notes'
              },
              {
                key: 'Fee',
                header: 'Fee'
              }
            ]}
            addons={[
              pageable(),
              // 支持表格滚动，高度超过 192 开始显示滚动条
              scrollable({
                // maxHeight: 192,
                // minWidth: 1600,
                onScrollBottom: () => console.log('到达底部')
              }),

              // 支持表格排序
              sortable({
                // 这两列支持排序，其中 age 列优先倒序
                columns: ['name', { key: 'age', prefer: 'desc' }],
                value: sorts,
                onChange: value => setSorts(value)
              }),

              // 支持表格单选
              radioable({
                value: selected,
                rowSelect: true,
                onChange: (value, context) => {
                  console.log(value, context)
                  setSelected(value)
                },
                render: (element, { disabled }) => {
                  return disabled ? <Icon type="loading" /> : element
                }
              })
            ]}
          />
        </Form.Item>
        <Form.Item label="Image">
          <Segment
            defaultValue="default"
            options={[
              { value: 'default', text: 'Public Image' },
              { value: 'fixed', text: 'Custom Image' }
            ]}
          />
          <div style={{ height: '10px' }}></div>
          <Select
            appearance="button"
            style={selectStyles}
            options={[
              { value: '64-bit', text: '64-bit' },
              { value: 'CentOS', text: 'CentOS' },
              { value: 'windows', text: 'windows' },
              { value: 'CoreOS', text: 'CoreOS' },
              { value: 'Ubuntu', text: 'Ubuntu' },
              { value: 'Debian', text: 'Debian' },
              { value: 'FreeBSD', text: 'FreeBSD' },
              { value: 'openSUSE', text: 'openSUSE' }
            ]}
            defaultValue={'CentOS'}
            placeholder="please select"
          />
          <Select
            appearance="button"
            style={selectStyles}
            options={[
              { value: '64-bit', text: '64-bit' },
              { value: '32-bit', text: '32-bit' }
            ]}
            defaultValue={'64-bit'}
            placeholder="please select"
          />
          <Select
            appearance="button"
            style={selectStyles}
            options={[
              { value: 'CentOS 8.4 64bit', text: 'CentOS 8.4 64bit' },
              { value: 'CentOS 8.3 64bit', text: 'CentOS 8.3 64bit' },
              { value: 'CentOS 8.0 64bit', text: 'CentOS 8.0 64bit' },
              { value: 'CentOS 7.9 64bit', text: 'CentOS 7.9 64bit' }
            ]}
            placeholder="please select"
          />
        </Form.Item>
        <Form.Item label="System disk">
          <Select
            appearance="button"
            style={selectStyles}
            options={[
              { value: 'Premium Cloud Storage', text: 'Premium Cloud Storage' },
              { value: 'SSD Cloud Storage', text: 'SSD Cloud Storage' }
            ]}
            defaultValue={'Premium Cloud Storage'}
            placeholder="please select"
          />
          <InputNumber
            value={value}
            onChange={value => {
              console.log(value)
              setValue(value)
            }}
            min={1}
            max={1000}
            step={1}
            unit="GB"
          />
        </Form.Item>
        <Form.Item label="Data disk" suffix="You can add 19 data disk(s)">
          <Select
            appearance="button"
            style={selectStyles}
            options={[
              { value: 'Premium Cloud Storage', text: 'Premium Cloud Storage' },
              { value: 'SSD Cloud Storage', text: 'SSD Cloud Storage' }
            ]}
            defaultValue={'Premium Cloud Storage'}
            placeholder="please select"
          />
          <InputNumber
            value={value}
            style={selectStyles}
            onChange={value => {
              console.log(value)
              setValue(value)
            }}
            min={1}
            max={1000}
            step={1}
            unit="GB   Amount"
          />
          <Input />
          <div style={{ height: '10px' }}></div>
          <Button type="link">
            <Icon type="and" /> Create cloud data disk
          </Button>
        </Form.Item>
        <Form.Item label="Public network bandwidth">
          <Slider
            min={0}
            max={100}
            tipFormatter={value => `${Math.max(value, 1)} Mbps`}
            marks={marks.map(({ value }) => ({ value, label: `${Math.max(value, 1)} Mbps` }))}
            value={value1}
            onChange={value => setValue1(value)}
            after={
              <InputAdornment after="Mbps" appearance="pure">
                <InputNumber min={1} max={100} step={1} value={value1} onChange={value => setValue1(value)} />
              </InputAdornment>
            }
          />
        </Form.Item>
      </Form>
    </div>
  )
}
